
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>答题卡评估系统</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
      .option-btn {
          transition: all 0.3s ease;
      }
      .option-btn.selected {
          transform: scale(0.95);
          box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
      }
      .fade-in {
          animation: fadeIn 0.5s ease-in;
      }
      @keyframes fadeIn {
          from { opacity: 0; transform: translateY(10px); }
          to { opacity: 1; transform: translateY(0); }
      }
  </style>
</head>
<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen p-4 md:p-8">
<div class="max-w-6xl mx-auto">
  <!-- 头部标题 -->
  <header class="text-center mb-8 md:mb-12 fade-in">
    <h1 class="text-3xl md:text-4xl font-bold text-gray-800 mb-2">答题卡评估系统</h1>
    <p class="text-gray-600 max-w-2xl mx-auto">点击左侧选择您的答案，右侧选择正确答案，系统将自动计算正确率</p>
  </header>

  <!-- 主内容区域 -->
  <main class="grid grid-cols-1 lg:grid-cols-2 gap-6 md:gap-8 max-w-4xl mx-auto">
    <!-- 左侧答题卡 -->
    <section class="bg-white rounded-2xl shadow-lg p-6 fade-in text-center">
      <div class="flex justify-between items-center mb-6">
        <h2 class="text-xl font-semibold text-gray-800 flex items-center">
          <i class="fas fa-pencil-alt text-blue-500 mr-2"></i>
          答题卡
        </h2>
        <span class="text-sm text-gray-500">点击选项进行选择</span>
      </div>

      <div class="grid grid-cols-1 gap-3 md:gap-4" id="answerSheet">
        <!-- 答题卡格子将通过JavaScript生成 -->
      </div>

      <div class="mt-6 pt-4 border-t border-gray-200">
        <div class="flex items-center justify-between text-sm text-gray-600">
          <div class="flex items-center">
            <div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div>
            <span>已选择: <span id="selectedCount">0</span>/20</span>
          </div>
          <button id="resetAnswers" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors">
            <i class="fas fa-redo-alt mr-1"></i>重置
          </button>
        </div>
      </div>
    </section>

    <!-- 右侧答案区 -->
    <section class="bg-white rounded-2xl shadow-lg p-6 fade-in text-center">
      <div class="flex justify-between items-center mb-6">
        <h2 class="text-xl font-semibold text-gray-800 flex items-center">
          <i class="fas fa-check-circle text-green-500 mr-2"></i>
          正确答案
        </h2>
        <span class="text-sm text-gray-500">点击选项设置正确答案</span>
      </div>

      <div class="grid grid-cols-1 gap-3 md:gap-4" id="correctAnswers">
        <!-- 正确答案格子将通过JavaScript生成 -->
      </div>

      <div class="mt-6 pt-4 border-t border-gray-200">
        <div class="flex items-center justify-between text-sm text-gray-600">
          <div class="flex items-center">
            <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
            <span>已设置: <span id="correctCount">0</span>/20</span>
          </div>
          <button id="resetCorrect" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors">
            <i class="fas fa-redo-alt mr-1"></i>重置
          </button>
        </div>
      </div>
    </section>
  </main>

  <!-- 正确率显示区域 -->
  <div class="fixed right-4 top-4 z-10">
    <section class="bg-white rounded-2xl shadow-lg p-4 w-48 fade-in">
      <h2 class="text-lg font-semibold text-gray-800 flex items-center justify-center mb-2">
        <i class="fas fa-chart-bar text-purple-500 mr-2"></i>
        正确率
      </h2>

      <div class="text-center mb-2">
        <div class="text-2xl font-bold text-purple-600" id="accuracyRate">0%</div>
      </div>

      <div class="grid grid-cols-2 gap-2 text-xs mb-2">
        <div>
          <div class="font-medium text-gray-800" id="correctNum">0</div>
          <div class="text-gray-500">正确</div>
        </div>
        <div>
          <div class="font-medium text-gray-800" id="totalNum">20</div>
          <div class="text-gray-500">总数</div>
        </div>
      </div>

      <!-- 进度条 -->
      <div class="mt-2">
        <div class="w-full bg-gray-200 rounded-full h-2">
          <div id="progressBar" class="h-2 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 transition-all duration-500" style="width: 0%"></div>
        </div>
      </div>
    </section>
  </div>

  <!-- 页脚 -->
  <footer class="text-center text-gray-500 text-sm mt-8 md:mt-12">
    <p>答题卡评估系统 &copy; 2025 - 点击选项进行选择，系统自动计算正确率</p>
  </footer>
</div>

<script>
    // 初始化数据
    function getUrlParam(name) {
        const url = new URL(window.location.href);
        return url.searchParams.get(name);
    }

    const urlTotalQuestions = parseInt(getUrlParam('total')) || 20;
    const totalQuestions = Math.max(1, Math.min(urlTotalQuestions, 500)); // 限制在1-500之间
    const options = ['A', 'B', 'C', 'D'];

    let userAnswers = Array(totalQuestions).fill(null);
    let correctAnswers = Array(totalQuestions).fill(null);

    // 初始化页面
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('totalNum').textContent = totalQuestions;

        initAnswerSheet();
        initCorrectAnswers();
        updateStats();

        // 添加重置按钮事件监听
        document.getElementById('resetAnswers').addEventListener('click', resetUserAnswers);
        document.getElementById('resetCorrect').addEventListener('click', resetCorrectAnswers);
    });

    // 初始化答题卡
    function initAnswerSheet() {
        const container = document.getElementById('answerSheet');
        container.innerHTML = '';

        for (let i = 0; i < totalQuestions; i++) {
            const questionDiv = document.createElement('div');
            questionDiv.className = 'flex items-center justify-center w-full space-x-4';

            const resultMarker = document.createElement('div');
            resultMarker.className = 'w-5 text-center';
            resultMarker.id = `result-marker-${i}`;

            const label = document.createElement('div');
            label.className = 'text-sm font-medium text-gray-700';
            label.textContent = `第${i + 1}题`;

            const optionsDiv = document.createElement('div');
            optionsDiv.className = 'flex space-x-2';

            options.forEach(option => {
                const btn = document.createElement('button');
                btn.className = `option-btn w-10 h-10 rounded-lg flex items-center justify-center font-medium transition-all ${
                    userAnswers[i] === option
                        ? 'bg-blue-500 text-white shadow-md selected'
                        : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
                }`;
                btn.textContent = option;
                btn.dataset.question = i;
                btn.dataset.option = option;

                btn.addEventListener('click', function() {
                    selectAnswer(i, option);
                });

                optionsDiv.appendChild(btn);
            });

            questionDiv.appendChild(resultMarker);
            questionDiv.appendChild(label);
            questionDiv.appendChild(optionsDiv);
            container.appendChild(questionDiv);
        }
    }

    // 初始化正确答案区域
    function initCorrectAnswers() {
        const container = document.getElementById('correctAnswers');
        container.innerHTML = '';

        for (let i = 0; i < totalQuestions; i++) {
            const questionDiv = document.createElement('div');
            questionDiv.className = 'flex items-center justify-center w-full space-x-4';

            const label = document.createElement('div');
            label.className = 'text-sm font-medium text-gray-700';
            label.textContent = `第${i + 1}题`;

            const optionsDiv = document.createElement('div');
            optionsDiv.className = 'flex space-x-2';

            options.forEach(option => {
                const btn = document.createElement('button');
                btn.className = `option-btn w-10 h-10 rounded-lg flex items-center justify-center font-medium transition-all ${
                    correctAnswers[i] === option
                        ? 'bg-green-500 text-white shadow-md selected'
                        : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
                }`;
                btn.textContent = option;
                btn.dataset.question = i;
                btn.dataset.option = option;

                btn.addEventListener('click', function() {
                    selectCorrectAnswer(i, option);
                });

                optionsDiv.appendChild(btn);
            });

            questionDiv.appendChild(label);
            questionDiv.appendChild(optionsDiv);
            container.appendChild(questionDiv);
        }
    }

    // 选择答案
    function selectAnswer(questionIndex, option) {
        // 如果是单选，先清除该题的其他选择
        const questionButtons = document.querySelectorAll(`button[data-question="${questionIndex}"]`);
        questionButtons.forEach(btn => {
            btn.classList.remove('bg-blue-500', 'text-white', 'selected');
            btn.classList.add('bg-gray-100', 'text-gray-700');
        });

        // 设置当前选择
        userAnswers[questionIndex] = option;
        const selectedBtn = document.querySelector(`button[data-question="${questionIndex}"][data-option="${option}"]`);
        selectedBtn.classList.remove('bg-gray-100', 'text-gray-700');
        selectedBtn.classList.add('bg-blue-500', 'text-white', 'selected');

        // 更新结果标记
        updateResultMarker(questionIndex);
        updateStats();
    }

    // 选择正确答案
    function selectCorrectAnswer(questionIndex, option) {
        // 如果是单选，先清除该题的其他选择
        const correctAnswerButtons = document.querySelectorAll(`#correctAnswers button[data-question="${questionIndex}"]`);
        correctAnswerButtons.forEach(btn => {
            btn.classList.remove('bg-green-500', 'text-white', 'selected');
            btn.classList.add('bg-gray-100', 'text-gray-700');
        });

        // 设置当前选择
        correctAnswers[questionIndex] = option;
        const selectedBtn = document.querySelector(`#correctAnswers button[data-question="${questionIndex}"][data-option="${option}"]`);
        selectedBtn.classList.remove('bg-gray-100', 'text-gray-700');
        selectedBtn.classList.add('bg-green-500', 'text-white', 'selected');

        // 更新结果标记
        updateResultMarker(questionIndex);
        updateStats();
    }

    // 更新结果标记
    function updateResultMarker(questionIndex) {
        const marker = document.getElementById(`result-marker-${questionIndex}`);
        if (userAnswers[questionIndex] && correctAnswers[questionIndex]) {
            if (userAnswers[questionIndex] === correctAnswers[questionIndex]) {
                marker.innerHTML = '<i class="fas fa-check text-green-500"></i>';
            } else {
                marker.innerHTML = '<i class="fas fa-times text-red-500"></i>';
            }
        } else {
            marker.innerHTML = '';
        }
    }

    // 更新统计数据
    function updateStats() {
        // 计算已选择的题目数量
        const selectedCount = userAnswers.filter(answer => answer !== null).length;
        const correctCount = correctAnswers.filter(answer => answer !== null).length;

        document.getElementById('selectedCount').textContent = selectedCount;
        document.getElementById('correctCount').textContent = correctCount;

        // 计算正确率
        let correctNum = 0;
        for (let i = 0; i < totalQuestions; i++) {
            if (userAnswers[i] !== null && correctAnswers[i] !== null && userAnswers[i] === correctAnswers[i]) {
                correctNum++;
            }
        }

        const accuracy = correctCount > 0 ? Math.round((correctNum / correctCount) * 100) : 0;

        document.getElementById('correctNum').textContent = correctNum;
        document.getElementById('accuracyRate').textContent = `${accuracy}%`;

        // 更新进度条
        const progressBar = document.getElementById('progressBar');
        progressBar.style.width = `${accuracy}%`;

        // 根据正确率改变进度条颜色
        if (accuracy >= 80) {
            progressBar.className = 'h-3 rounded-full bg-gradient-to-r from-green-500 to-teal-600 transition-all duration-500';
        } else if (accuracy >= 60) {
            progressBar.className = 'h-3 rounded-full bg-gradient-to-r from-yellow-500 to-orange-500 transition-all duration-500';
        } else {
            progressBar.className = 'h-3 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 transition-all duration-500';
        }
    }

    // 重置用户答案
    function resetUserAnswers() {
        userAnswers = Array(totalQuestions).fill(null);
        initAnswerSheet();
        updateStats();
    }

    // 重置正确答案
    function resetCorrectAnswers() {
        correctAnswers = Array(totalQuestions).fill(null);
        initCorrectAnswers();
        updateStats();
    }
</script>
</body>
</html>